<template>
  <div class="right-bot">
    <dv-border-box-13>
      <title-bar :data="{name: 'MPA指标'}"></title-bar>
      <dv-digital-flop class="digital-flop-number" :config="config1" />
      <title-bar :data="{name: '五级不良率'}"></title-bar>
      <dv-scroll-board class="my-swiper" :config="config2" />
    </dv-border-box-13>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import getRandom from '@/assets/js/getRandom'
export default {
  name: 'RightBot',
  data () {
    const icon1 = `<img class="icon" src="${require('../../assets/img/ckrijun.png')}" alt="">`
    const icon2 = `<img class="icon" src="${require('../../assets/img/cunkuan.png')}" alt="">`
    const icon3 = `<img class="icon" src="${require('../../assets/img/daikuan.png')}" alt="">`
    const icon4 = `<img class="icon" src="${require('../../assets/img/dkrijun.png')}" alt="">`
    return {
      config1: {
        style: {
          fontSize: 30,
          fill: '#FFD640'
        },
        number: [53, 234, 36],
        textAlign: 'left',
        content: '{nt},{nt}.{nt}万元'
      },
      config2: {
        waitTime: 2000,
        header: ['排名', '支行名称', '得分'],
        align: ['center', 'left', 'left'],
        columnWidth: [50, 200, 50],
        data: [
          [icon1, '大丰支行', '98'],
          [icon3, '庆春支行', '89'],
          [icon2, '涌泉支行', '98'],
          [icon1, '城南支行', '89'],
          [icon4, '城东支行', '98'],
          [icon3, '昌北支行', '89'],
          [icon1, '鄞州支行', '98'],
          [icon4, '路桥支行', '98'],
          [icon1, '桐庐支行', '98']
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['getCount'])
  },
  watch: {
    getCount () {
      this.config1 = {
        style: {
          fontSize: 30,
          fill: '#FFD640'
        },
        number: [getRandom(0, 100), getRandom(0, 1000), getRandom(0, 100)],
        textAlign: 'left',
        content: '{nt},{nt}.{nt}万元'
      }
    }
  }
}
</script>
<style lang="less">
  .right-bot {
    overflow: hidden;
    height: 500px;
    position: relative;
    .digital-flop-number {
      height: 50px;
      padding-left: 20px;
      padding-top: 10px;
    }
    .my-swiper {
      height: 300px !important;
    }
    .icon {
      margin-top: 13px;
    }
    .row-item {
      height: 48px !important;
      line-height: 48px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      color: #40FFE6;
      margin-top: 5px;
    }
    .header {
      background: none !important;
      color: #ccc;
    }
  }
</style>
